<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>model</title>
	<style type="text/css">
		body,div,h3{padding: 0; margin: 0;}
		h3{font-weight: normal;}
		img{border:0;}

		/*j-wx-code Start*/
		.j-wx-code{
			width: 335px;
			height: 355px;
			background-color: #fff;
			-webkit-border-radius: 6px;
			   -moz-border-radius: 6px;
			        border-radius: 6px;
			border: 1px solid #252627;
			position: relative;
			margin: 100px auto;
		}
		.j-wx-code>.code-close{
			width: 40px;
			height: 40px;
			position: absolute;
			right: -20px;
			top: -20px;
			cursor: pointer;
			-webkit-transition: all 1s;
			-o-transition: all 1s;
			-moz-transition: all 1s;
			transition: all 1s;
		}
		.j-wx-code>.code-close:hover{
			-webkit-transform: scale(1.2);
			   -moz-transform: scale(1.2);
			    -ms-transform: scale(1.2);
			     -o-transform: scale(1.2);
			        transform: scale(1.2);
		}
		.j-wx-code>.code-title{
			height: 82px;
			background:url(image/j-wx-code-title.png) center center no-repeat;
			-webkit-animation: moveYun 15s infinite linear both;
			   -moz-animation: moveYun 15s infinite linear both;
			     -o-animation: moveYun 15s infinite linear both;
			        animation: moveYun 15s infinite linear both;
		}
		.j-wx-code>.code-wxm{
			text-align: center;
			margin-bottom: 20px;
			
		}
		.j-wx-code>.code-wxm>img{
			width: 186px;
			height: 186px;
		}
		.j-wx-code>.code-text{
			font: 16px "microsoft yahei";
			text-align: center;
			color: #252627;
		}
		.j-wx-code>.code-bottom{
			width: 470px;
			height: 210px;
			position: absolute;
			bottom: -113px;
			left: -73px;
			background: url(image/j-wx-code-bottom.png) 0 0 no-repeat;
		}
		.j-wx-code>.code-bottom>img{
			position: absolute;
			left: 280px;
			top: 88px;
			-webkit-animation: codeWxMove 10s linear both;
			   -moz-animation: codeWxMove 10s linear both;
			     -o-animation: codeWxMove 10s linear both;
			        animation: codeWxMove 10s linear both;
			-webkit-animation-fill-mode:forwards;
			   -moz-animation-fill-mode:forwards;
			     -o-animation-fill-mode:forwards;
			        animation-fill-mode:forwards
		}
		/*j-wx-code End*/	
		
		@-webkit-keyframes moveYun{
			0%{-webkit-transform: translateX(0);transform: translateX(0);}
			25%{-webkit-transform: translateX(-55px);transform: translateX(-55px);}
			50%{-webkit-transform: translateX(0);transform: translateX(0);}
			75%{-webkit-transform: translateX(12px);transform: translateX(12px);}
			100%{-webkit-transform: translateX(0);transform: translateX(0);}
		}	
		
		@-moz-keyframes moveYun{
			0%{-moz-transform: translateX(0);transform: translateX(0);}
			25%{-moz-transform: translateX(-55px);transform: translateX(-55px);}
			50%{-moz-transform: translateX(0);transform: translateX(0);}
			75%{-moz-transform: translateX(12px);transform: translateX(12px);}
			100%{-moz-transform: translateX(0);transform: translateX(0);}
		}	
		
		@-o-keyframes moveYun{
			0%{-o-transform: translateX(0);transform: translateX(0);}
			25%{-o-transform: translateX(-55px);transform: translateX(-55px);}
			50%{-o-transform: translateX(0);transform: translateX(0);}
			75%{-o-transform: translateX(12px);transform: translateX(12px);}
			100%{-o-transform: translateX(0);transform: translateX(0);}
		}	
		
		@keyframes moveYun{
			0%{-webkit-transform: translateX(0);-moz-transform: translateX(0);-o-transform: translateX(0);transform: translateX(0);}
			25%{-webkit-transform: translateX(-55px);-moz-transform: translateX(-55px);-o-transform: translateX(-55px);transform: translateX(-55px);}
			50%{-webkit-transform: translateX(0);-moz-transform: translateX(0);-o-transform: translateX(0);transform: translateX(0);}
			75%{-webkit-transform: translateX(12px);-moz-transform: translateX(12px);-o-transform: translateX(12px);transform: translateX(12px);}
			100%{-webkit-transform: translateX(0);-moz-transform: translateX(0);-o-transform: translateX(0);transform: translateX(0);}
		}
		
		
		
		
		@-webkit-keyframes codeWxMove{
			0%{-webkit-transform: translateX(0);transform: translateX(0);}
			100%{-webkit-transform: translateX(-80px);transform: translateX(-80px);}
		}
		@-moz-keyframes codeWxMove{
					0%{-moz-transform: translateX(0);transform: translateX(0);}
					100%{-moz-transform: translateX(-80px);transform: translateX(-80px);}
				}
		@-o-keyframes codeWxMove{
					0%{-o-transform: translateX(0);transform: translateX(0);}
					100%{-o-transform: translateX(-80px);transform: translateX(-80px);}
				}
		@keyframes codeWxMove{
					0%{-webkit-transform: translateX(0);-moz-transform: translateX(0);-o-transform: translateX(0);transform: translateX(0);}
					100%{-webkit-transform: translateX(-80px);-moz-transform: translateX(-80px);-o-transform: translateX(-80px);transform: translateX(-80px);}
				}
		
	</style>
</head>
<body>
	
	<!--j-wx-code Start-->
	<div class="j-wx-code">
		<img class="code-close" src="image/j-wx-code-close.png" alt=""/>
		<div class="code-title"></div>
		<div class="code-wxm"><img src="image/j-wx-code-ewm.png"/></div>
		<div class="code-text">
			<span>要继续使用，请<strong>微信扫码登录</strong></span>
			<br/>
			<span>感谢支持！</span>
		</div>
		<div class="code-bottom">
			<img src="image/j-wx-cose-move.png" alt=""/>
		</div>
	</div>
	<!--j-wx-code End-->
</body>
</html>